$(function () {
    // 在页面加载的时候 就调用函数 渲染一次页面
    load();
    // 找到title元素给它注册键盘按下的事件
    $('#title').on('keydown', function (e) {
        // 判断当 用户按下的键 为回车ASCC码值时
        if (e.keyCode === 13) {
            // 如果当前的输入框为空或者是空格时
            if ($(this).val().trim() === '') {
                // 弹出对话框
                alert('请输入您要的操作');
                // 清除内容
                $(this).val('');
            } else {
                // 声明一个变量 接收 本地的数据
                var local = getDate();
                local.push({ title: $(this).val(), done: false });
                saveDate(local);
                load();
                $(this).val('');
            }
        }
    });
    // 3. 删除操作 
    $('ol').on('click', 'a', function () {
        // 先获取本地储存的数据
        var data = getDate();
        // 修改数据
        var index = $(this).attr('index');
        // console.log(index);
        data.splice(index,1);
        // 保存数据 到本地储存
        saveDate(data);
        // 调用函数 重新渲染
        load();
    });

    $('ul,ol').on('click','input',function() {
        var data = getDate();
        var index = $(this).siblings('a').attr('index');
        data[index].done = $(this).prop('checked');
        saveDate(data);
        load();
    });
    // 封装函数 重复调用
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    // 保存本地数据
    function saveDate(data) {
        localStorage.setItem('todolist', JSON.stringify(data));
    }
    // 渲染加载数据
    function load() {
        var data = getDate();
        console.log(data);
        $('ol, ul').empty();
        var todoCount = 0; // 正在进行的个数
        var toneCount = 0; // 已经完成的个数
        $.each(data, function (i, ele) {
            var li = $(`<li><input type="checkbox"><p>${ele.title}</p> <a href='javascript:;' index=${i}></a></li>`);
            $('ol').prepend(li);
        });
    }
})